<!DOCTYPE html>
<html class="x-admin-sm">
  <head>
    <meta charset="UTF-8" />
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"
    />
    <link rel="stylesheet" href="public/css/font.css" />
    <link rel="stylesheet" href="public/css/xadmin.css" />
    <script src="public/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="public/js/xadmin.js"></script>
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">车主信息</a>
      </span>
      <a
        class="layui-btn layui-btn-small"
        style="line-height: 1.6em; margin-top: 3px; float: right;"
        onclick="location.reload()"
        title="刷新"
      >
        <i class="layui-icon layui-icon-refresh" style="line-height: 30px;"></i>
      </a>
    </div>
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-body">
              <form class="layui-form layui-col-space5">
                <div class="layui-inline layui-show-xs-block">
                  <input
                    class="layui-input"
                    autocomplete="off"
                    placeholder="开始日"
                    name="start"
                    id="start"
                  />
                </div>

                <div class="layui-inline layui-show-xs-block">
                  <input
                    class="layui-input"
                    autocomplete="off"
                    placeholder="截止日"
                    name="end"
                    id="end"
                  />
                </div>

                <div class="layui-inline layui-show-xs-block">
                  <input
                    type="text"
                    name="username"
                    placeholder="请输入用户名"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>

                <div class="layui-inline layui-show-xs-block">
                  <button class="layui-btn" lay-submit="" lay-filter="sreach">
                    <i class="layui-icon">&#xe615;</i>
                  </button>
                </div>
              </form>
            </div>
            <div class="layui-card-body">
              <div class="layui-card-header">
                <button
                  class="layui-btn"
                  onclick="xadmin.open('添加车主信息','./car-owner-add',600,400)"
                >
                  <i class="layui-icon"></i>添加
                </button>
              </div>
              <table
                class="layui-table"
                lay-data="{url:'/api/userinfo',page:true,toolbar: '#toolbarDemo',id:'test'}"
                lay-filter="test"
              >
                <thead>
                  <tr>
                    <th lay-data="{type:'checkbox'}">ID</th>
                    <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                    <th
                      lay-data="{field:'userid', width:120, sort: true, edit: 'text'}"
                    >
                      用户id
                    </th>
                    <th
                      lay-data="{field:'car_info', edit: 'text', minWidth: 150}"
                    >
                      汽车信息
                    </th>
                    <th lay-data="{field:'car_color', width:80,}">
                      汽车颜色
                    </th>
                    <th
                      lay-data="{field:'img_url', edit: 'text', minWidth: 100}"
                    >
                      汽车图片
                    </th>
                    <th lay-data="{field:'creatAt', sort: true, edit: 'text'}">
                      创建时间
                    </th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <!-- <script type="text/html" id="toolbarDemo">
    <div class = "layui-btn-container" >
        <button class = "layui-btn layui-btn-sm" lay-event = "getCheckData" > 获取选中行数据 </button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button >
        <button class = "layui-btn layui-btn-sm" lay-event = "isAll" > 验证是否全选</button>
    </div >
  </script> -->
  <script type="text/html" id="switchTpl">
    <!-- 这里的checked的状态只是演示 -->
    <input type = "checkbox" name = "sex" value = "{{}}" lay-skin = "switch"lay-text = "女|男" lay-filter = "sexDemo" {{ 1 == 10003 ? 'checked': ''}} >
  </script>
  <script>
    layui.use('laydate', function () {
      var laydate = layui.laydate

      //执行一个laydate实例
      laydate.render({
        elem: '#start', //指定元素
      })

      //执行一个laydate实例
      laydate.render({
        elem: '#end', //指定元素
      })
    })
  </script>
  <script>
    layui.use('table', function () {
      var table = layui.table

      //监听单元格编辑
      table.on('edit(test)', function (obj) {
        var value = obj.value, //得到修改后的值
          data = obj.data, //得到所在行所有键值
          field = obj.field //得到字段
        layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value)
      })

      //头工具栏事件
      table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id)
        switch (obj.event) {
          case 'getCheckData':
            var data = checkStatus.data
            layer.alert(JSON.stringify(data))
            break
          case 'getCheckLength':
            var data = checkStatus.data
            layer.msg('选中了：' + data.length + ' 个')
            break
          case 'isAll':
            layer.msg(checkStatus.isAll ? '全选' : '未全选')
            break
        }
      })
    })
  </script>
</html>
